<template>
  <div class="log-container">
    <userHeader/>
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}">   <a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/logList'}">  <a class="bread2">系统日志 ></a></router-link>
          <a class="bread2">企业目录日志 </a>
      </span>
    </div>
    <div class="log-content">
      <div class="handle-list" style="margin-bottom: 20px;">
        <el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;width: 80px;text-align: center;"
                     @command="handleSelectStaff">
          <span class="el-dropdown-link">
            {{handleStaff}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="padding: 0 20px;">
            <el-dropdown-item :command="item.user_id" v-for="item in handleStaffList" v-bind:key="item.user_id">{{item.real_name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button type="primary" @click="showOperationPeriod">操作时间</el-button>
        <el-dialog
          title="请选择要查询的时期"
          :visible.sync="isShowOperationPeriod"
          width="30%"
          style="min-width: 412px;">
          <el-date-picker
            v-model="operationPeriod"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectOperationPeriod">确 定</el-button>
          </span>
        </el-dialog>


      </div>
      <el-row>
        <el-col>
          <el-table
            :height="height"
            :data="companyLogList">
            <el-table-column
              label="公司编号"
              prop="company_num"
              width="166">
            </el-table-column>
            <el-table-column
              label="公司名称"
              prop="company_name"
              width="285">
            </el-table-column>
            <el-table-column
              label="级别"
              prop="company_level"
              width="178">
            </el-table-column>
            <el-table-column
              label="操作者"
              prop="handler_name"
              width="322">
            </el-table-column>
            <el-table-column
              label="操作日期"
              prop="handle_time"
              width="256">
            </el-table-column>
            <el-table-column
              label="IP"
              prop="hander_ip"
              width="186">
            </el-table-column>
            <el-table-column
              label="操作记录"
              width="222">
              <template slot-scope="scope">
                <span style="cursor: pointer" :class="{ canread: scope.row.handle_type==2}" @click="showHandle(scope.row)">{{scope.row.handle_type_text}}</span>
              </template>
            </el-table-column>
            <el-table-column></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <!--修改之前的显示-->
      <el-dialog title="编辑公司信息" :visible.sync="isShowinfoBeforeEdit" style="padding-left: 32px;padding-right: 32px;box-sizing: border-box;">
        <el-form :model="infoBeforeEdit" style="padding-left:24px;padding-right:24px;" label-width="20%">
          <el-form-item label="单位名称" style="background:#f2f5fc;margin-bottom:8px;padding:10px 60px;">
            <el-input v-model="infoBeforeEdit.company_name" readonly></el-input>
          </el-form-item>
          <el-form-item label="单位编号" style="background:#f2f5fc;margin-bottom:8px;padding:10px 60px;">
            <el-input v-model="infoBeforeEdit.company_name" readonly></el-input>
          </el-form-item>
          <el-form-item label="上级企业" style="background:#f2f5fc;margin-bottom:8px;padding:10px 60px;">
            <el-input v-model="infoBeforeEdit.company_name" readonly></el-input>
          </el-form-item>
          <el-form-item label="账号状态" style="background:#f2f5fc;margin-bottom:8px;padding:10px 60px;">
            <el-radio-group v-model="infoBeforeEdit.company_state" disabled>
              <el-radio label="1">使用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-dialog>


      <!--分页器-->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="limit"
          background
          layout="prev, pager, next, jumper"
          :page-count="pages">
        </el-pagination>
      </div>
    </div>



  </div>
</template>
<script>
  import userHeader from '@/components/header.vue'
  import {formatTimeIncludeText,formatDateTime} from '@/utils/index.js'
  import {mapState} from 'vuex'
  export default ({
    data() {
      return {
        state:"1",
        operationPeriod:[],
        operationPeriodFormat:['',''],
        handleStaff:'操作人员',
        handleStaffId:'',
        handleStaffList:[],
        isShowOperationPeriod:false,
        handleTime:new Date(),
        currentPage:1,
        limit:10,
        pages:1,
        pickerOptions: {
          //日期限定今天之前
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        companyLogList:null,
        isShowinfoBeforeEdit:false,
        infoBeforeEdit:{} //被编辑之前的信息
      }
    },
    components: {
      userHeader,
    },
    created() {
      this.getOperators()
      // /api/v1/blog/companylog?limit=10&page=1
      this.getTableDataByCondition(this.handleStaffId,this.operationPeriodFormat,this.limit,1)
      // this.getTableData(this.limit,this.currentPage)
    },
    computed: {
      ...mapState({
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
    },
    methods: {
      selectOperationPeriod(){
        if(this.operationPeriod.length>0){
          this.operationPeriod.forEach((el,index)=>{
            this.operationPeriodFormat[index] = new Date(el).getTime()/1000
          })

          // console.log(this.operationPeriodFormat)

          this.getTableDataByCondition(this.handleStaffId,this.operationPeriodFormat,this.limit,1)

          this.isShowOperationPeriod =false;
          //每次选择时间之后，数据返回之后将日期间隔 清空
          this.operationPeriod = ['','']
          this.operationPeriodFormat = ['','']
        }else {
          this.$alert("时间选择有误","提示")
        }

      },
      showOperationPeriod(){
        this.isShowOperationPeriod =true
      },
      handleSelectStaff(commond){
        this.handleStaffId = commond
        this.handleStaffList.forEach(el=>{
          if(el.user_id == commond){
            this.handleStaff = el.real_name
          }
        })
        this.getTableDataByCondition(commond,this.operationPeriodFormat,this.limit,1)
      },
      showHandle(row){
        // /api/v1/blog/companylog/:comlog_id
        if(row.handle_type==2){
          this.axios.get("/api/v1/blog/companylog/"+ row.comlog_id).then(res=>{
            this.infoBeforeEdit = res.data.data
            this.isShowinfoBeforeEdit = true;
            console.log(res)
          })
        }else {
          this.$alert("此日志为新增或者删除操作，请在当前表格中查看",'提示')
        }
      },
      handleCurrentChange(val) {
        console.log(val);
        this.currentPage = val;
        this.getTableDataByCondition(this.handleStaffId,this.operationPeriodFormat,this.limit,this.currentPage)


      },
      getOperators(){
        this.axios.get("/api/v1/blog/companyoperator").then(res => {
          console.log(res.data);

          if(res.data.code==0){
            this.handleStaffList = [...res.data.data,{
              real_name: "所有",
              user_id: "all",
              user_name: "all"
            }]
          }
          console.log(this.handleStaffList)

        });
      },
      getTableDataByCondition(id,period,limit,page){
        if(id=='all'){id=''}
        this.axios.get("/api/v1/blog/companylog?operator="+id+"&start_time="+period[0]+"&end_time="+ period[1]+"&limit="+limit+"&page="+page).then(res=>{
          if(res.data.code==0){
            this.companyLogList = res.data.data;
            this.currentPage = res.data.pagination.page;
            this.limit = res.data.pagination.limit;
            this.totalCount = res.data.pagination.count;
          }else {
            this.$alert(res.data.message, "提示")
          }
        });
      }



    }


  })
</script>
<style scoped>
  /*common*/
  .log-content {
    margin-bottom: 20px;
    padding:14px 18px 14px;
    box-sizing: border-box;
  }

  .handle-list{

  }
  .log-content >>> .el-table th.is-leaf {
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
    background: #d5e9bf;
    color: #5d9120;
    font-size: 16px;
  }
  .log-content>>> .el-table .cell{
    padding-top: 8px;
    padding-bottom:8px;
  }

  .canread{
    cursor: pointer;
    color:#5d8acb;
  }

</style>
